<template>
  <div class="Tab">
    <div class="Main_main">
 <div class="Main_list">
  <div class="List" v-for="(item,index) in doclist" :key="index">
    <img style="width: 50px; height: 50px;margin: 10px;border-radius: 100%" :src="item.doctorimage">
    <p style="font-size: 16px; padding-top: 10px"><b>{{ item.doctorname }}</b> &ensp;<span style="font-size: 12px"><b>{{ item.doctorstate }}</b></span></p>
    <p>{{ item.doctoradministre }} | {{ item.doctorcity }}</p>
    <p class="pp">{{ item.doctordescword }}</p>
    <button class="brn_tn" @click="gua"><b>去挂号</b></button>
  </div>
  </div>
  </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios  from '@/utils/axios/axios';
import { useRouter } from 'vue-router';

export default {
   setup() {
    const router = useRouter()
    const value1 = ref(0);
    const value2 = ref('a');
    const doclist=ref([])
   const userlist=async()=>{
        await axios.get('/api/doctorlist').then(res=>{
            console.log(res);
            doclist.value=res.data.res.slice(20,29)
        })
        }
        userlist()
        // 跳转到挂号页面
        const gua = () => {
          router.push('/registered')
          console.log(1111);
          
        }
    return {
      value1,
      value2,
      doclist,
      gua
    };
  },
  props: {
    data: Object
  }
};
</script>

<style scoped>
h2 {
  color: #007bff;
}
.Tab{
    width: 100%;
    background: #e8e9eb;
    height: 81vh;
    overflow: scroll;
}
.Main_main{
    width: 100%;
    
}
.Top_list{
  width: 100%;
  height: 8vh;
  position: fixed;
  top: 19.1%;
  z-index: 999;
}
.Main_list{
  width: 96%;
  margin-left: 2%;
 
}
.List{
  width: 100%;
  height: 15vh;
  border-radius: 15px;
  position: relative;
  margin-top: 10px;
  background: #fff;
}
.List img{
  float: left;
}
.pp{
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 设置显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    /* 设置行高 */
    max-height: 3em;
    /* 设置最大高度，等于行高乘以行数 */
    font-size: 14px;
}
.brn_tn{
  width: 80px;
  height: 30px;
  background: green;
  color: #fff;
  position: absolute;
  top: 10px;
  left: 75%;
  border-radius: 15px;
  border: none;
}
</style>